<script lang="tsx">
import { Component, Vue, Inject } from 'vue-property-decorator'
import { VNodeDirective } from 'vue'
import clickOutside from '@/directives/click-outside'
import CollapseTransition from '@/components/CollapseTransition'

@Component({
  name: 'DropdownMenu',
  directives: {
    'click-outside': clickOutside,
  },
  components: {
    CollapseTransition,
  },
})
export default class extends Vue {
  render() {
    return (
      <div ref='dropdownMenu' v-click-outside={ this.clickOutside } class='dropdown-menu' onClick={ this.handleClick } >
        { this.$scopedSlots.default && this.$scopedSlots.default({
          isExpaned: this.isExpaned,
        }) }

        <collapse-transition>
          <div
            v-show={ this.isExpaned }
            class='dropdown-collapse'
            style={ this.collapseStyle }
          >
            { this.$slots.collapse }
          </div>
        </collapse-transition>

      </div>
    )
  }

  private isExpaned = false

  get showDirective(): VNodeDirective {
    return { name: 'show', value: this.isExpaned }
  }

  clickOutside() {
    this.isExpaned = false
  }

  handleClick() {
    this.isExpaned = !this.isExpaned
  }

  @Inject('direction')
  direction!: string

  get collapseStyle() {
    return !this.direction || this.direction === 'left' ? {
      left: 0,
      right: 'initial',
    } : {
      left: 'initial',
      right: 0,
    }
  }
}
</script>

<style>
.dropdown-menu {
  position: relative;
  overflow: visible;
}

.dropdown-collapse {
  position: absolute;
  top: 100%;
  min-width: 100%;
  transition: transform 150ms;
  transform-origin: center top;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .1);
  overflow: hidden;
}

</style>
